<template>
  <div class="help">
    <div class="top">
      <div class="w1350">
        <div class="flex">
          <div>您好,{{user_name}}</div>
          <div @click="exit" class="exit">退出</div>
        </div>
      </div>
    </div>
    <div class="logo">
      <div class="w1350">
        <img :src="logo">
      </div>
    </div>
    <div class="center">
      <div class="w1350 flex">
        <div class="hleft">
          <div class="title">常见问题</div>
          <router-link to="/help/howtoDo" class="nav">我怎么使用平台处理我的订单？</router-link>
          <router-link to="/help/howtoDistribut" class="nav">我如何使用平台分销？</router-link>
          <router-link to="/help/howtoOptimization" class="nav">我如何优化我的业务流程？</router-link>
          <router-link to="/help/howtoDifferent" class="nav">生产发货和订单处理中的订单为什么不同？</router-link>

          <div class="title">功能详解</div>
          <router-link to="/help/howtoaddSupplier" class="nav">1、添加供应商</router-link>
          <router-link to="/help/howtoaddDistributor" class="nav">2、添加分销商</router-link>
          <router-link to="/help/howtodoSee" class="nav">3、查看供应商产品</router-link>
          <router-link to="/help/howtoRelease" class="nav">4、产品发布功能</router-link>
          <router-link to="/help/howtoGet" class="nav">5、平台订单抓取功能</router-link>
          <router-link to="/help/howtoImport" class="nav">6、订单手工批量导入</router-link>
          <router-link to="/help/howtoPost" class="nav">7、通过手机端页面下单功能。</router-link>
          <router-link to="/help/howtoExamine" class="nav">8、订单审核功能</router-link>
          <router-link to="/help/howtoSend" class="nav">9、订单生产发货功能</router-link>
          <router-link to="/help/howtoHandle" class="nav">10、问题订单的处理</router-link>
          <!-- <router-link to="/help/howtoExport" class="nav">11、所有订单查询导出</router-link> -->
          <router-link to="/help/howtoStatistics" class="nav">12、佣金的结算统计</router-link>
          <router-link to="/help/howtoAdministration" class="nav">13、账号权限管理</router-link>
          <router-link to="/help/howtoExplain" class="nav">14、订单的状态流程说明</router-link>
        </div>
        <div class="hright">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    name: 'help',
    data() {
      return {
        logo: './static/help/logo.png',
        howtodo1: './static/help/howtodo1.png',
        howtodo2: 'https://file.storep.91haoka.cn/gantanhao/howtodo2.png',
        user_name: ""
      }
    },
    created() {
      //左上角店铺名
      var shop = JSON.parse(localStorage.getItem('USER'));
      this.user_name = shop.name
    },
    methods: {
      //退出
      exit: function() {
        var that = this
        axios.get('/api/auth/logout')
          .then(function() {
            that.$router.push({
              path: "/login"
            });
          })
      },
    }
  }
</script>

<style lang="scss">
  .help {
    background: #F1F1F1;
    font-size: 14px;

    .exit {
      margin-left: 20px;
      cursor: pointer;
      color: #77C9FF;
    }

    .flex {
      display: flex;
      flex-wrap: wrap;
    }

    .w1350 {
      width: 1350px;
      margin: 0 auto;
    }

    .top {
      height: 30px;
      line-height: 30px;
    }

    .logo {
      background: #42628D;
      padding: 20px 0;
    }

    .center {
      padding: 30px 0;

      .hleft {
        background: #fff;
        width: 330px;
        box-sizing: border-box;
        padding-top: 10px;
        color: #77C9FF;
        border-radius: 5px;
        box-shadow: 0 0 5px #ccc;

        .title {
          padding-bottom: 20px;
          padding-top: 20px;
          font-size: 16px;
          font-weight: bold;
          padding-left: 35px;
        }

        .nav:hover {
          background: #F1F1F1;
        }

        .nav {
          line-height: 40px;
          padding-left: 35px;
          display: block;
          color: #77C9FF;
        }

        .router-link-active {
          background: #F1F1F1 !important;
        }
      }

      .hright {
        background: #fff;
        justify-content: space-between;
        width: 1000px;
        box-sizing: border-box;
        margin-left: 20px;
        border-radius: 5px;
        box-shadow: 0 0 5px #ccc;
        padding-bottom: 30px;

        img {
          width: 100%;
          display: block;
          margin: 20px 0;
        }

        .title {
          padding: 15px 30px;
          font-size: 18px;
          color: #4D4D4D;
          border-bottom: 1px #DBDBDB solid;
        }

        .title2 {
          color: #FF6161;
          font-weight: bold;
        }

        .title4 {
          color: #FF7777;
          font-size: 14px
        }

        .bold {
          font-weight: bold;
        }

        .content {
          padding: 0 35px;
          line-height: 50px;
        }

        .nei {
          padding-left: 60px;
        }

        .blue {
          color: #77C9FF;
        }

        .title3 {
          font-size: 16px;
        }

        .big {
          font-size: 18px;
          padding: 20px 0;
        }
      }
    }
  }
</style>
